<template>
  <div>
    <!-- Footer Start-->
    <footer class="pt-50 pb-20 border-bottom-color  wow fadeInUp animated"  data-wow-delay="0.3s">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6">
                    <div class="sidebar-widget mb-30">
                        <div class="widget-header-2 position-relative mb-30">
                            <h5 class="mt-5 mb-30">关于</h5>
                        </div>
                        <div class="textwidget">
                            <p v-if="site.aboutMe">
                                {{site.aboutMe}}
                            </p>
                            <p><strong class="color-black">地址</strong>
                            <br>
                            {{site.address}}
                            <p><strong class="color-black">联系我</strong><br>
                                <ul class="header-social-network d-inline-block list-inline color-white mb-20">
                                    <li class="list-inline-item" @click="weixinCode"><svg t="1694758338498" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4248" width="20" height="20"><path d="M0 512c0 282.77 229.23 512 512 512s512-229.23 512-512S794.77 0 512 0 0 229.23 0 512z" fill="#2BA246" p-id="4249"></path><path d="M636.826 400.742c7.889 0.06 15.768 0.556 23.603 1.485C639.283 303.616 533.914 230.4 413.594 230.4c-134.452 0-244.634 91.648-244.634 208.077 0 67.174 36.66 122.368 97.894 165.222l-24.473 73.575 85.299-42.855c30.72 5.99 55.142 12.237 85.658 12.237 7.68 0 15.36-0.358 22.784-0.922a183.45 183.45 0 0 1-7.527-51.2c0.307-107.008 92.058-193.792 208.23-193.792z m-131.482-66.56a30.72 30.72 0 1 1 0 61.133c-18.278 0-36.71-12.288-36.71-30.72s18.33-30.157 36.71-30.157v-0.256z m-171.213 61.39c-18.38 0-36.864-12.289-36.864-30.72 0-18.433 18.483-30.72 36.864-30.72 16.966 0 30.72 13.753 30.72 30.72 0 16.965-13.754 30.72-30.72 30.72z" fill="#FFFFFF" p-id="4250"></path><path d="M652.34 413.952c-116.43 0-208.078 79.77-208.078 177.51 0 97.741 91.648 177.51 208.077 177.51 24.371 0 48.947-6.092 73.37-12.236l67.123 36.864-18.38-61.44c49.1-36.864 85.708-85.76 85.708-140.902 0-97.588-97.894-177.306-207.82-177.306z m-67.482 146.893c-13.517 0-24.474-10.957-24.474-24.474 0-13.516 10.957-24.473 24.474-24.473 18.585 0 30.72 12.288 30.72 24.473 0 12.186-12.135 24.474-30.72 24.474z m134.553 0c-13.516 0-24.473-10.957-24.473-24.474 0-13.516 10.957-24.473 24.473-24.473 18.381 0 30.72 12.288 30.72 24.473 0 12.186-12.339 24.474-30.72 24.474z" fill="#FFFFFF" p-id="4251"></path></svg></li>
                                    <li class="list-inline-item" @click="qqCode"><svg t="1694758292764" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3195" width="20" height="20"><path d="M505.952 933.548c0 49.951-72.902 90.452-162.68 90.452s-162.678-40.501-162.678-90.452 72.901-90.452 162.679-90.452 162.679 40.5 162.679 90.452z m175.504-90.452c-89.777 0-162.68 40.5-162.68 90.452S591.68 1024 681.457 1024s162.679-40.501 162.679-90.452-72.902-89.777-162.68-89.777z" fill="#EE7F00" p-id="3196"></path><path d="M945.387 693.917a315.908 315.908 0 0 0-36.45-128.928 337.508 337.508 0 0 0-36.452-63.452c-6.75-8.1-21.6-16.2-25.65-24.975a280.807 280.807 0 0 1 0-82.352c0-138.379-34.426-270.007-161.33-346.284A337.508 337.508 0 0 0 217.72 177.53c-51.3 98.553-19.575 182.255-39.15 280.807-5.4 28.35-24.301 40.501-41.176 67.502A375.31 375.31 0 0 0 79.34 673.666c0 28.351-8.1 108.678 28.35 117.453 25.651 6.075 58.052-41.176 67.502-58.051a359.784 359.784 0 0 0 333.459 258.531 359.109 359.109 0 0 0 334.133-258.531c12.15 18.9 39.826 59.401 67.501 58.051s35.776-72.226 35.101-97.202z" fill="#0B0E10" p-id="3197"></path><path d="M266.996 558.239a423.91 423.91 0 0 0-3.375 58.726c0 182.255 113.402 330.758 253.806 330.758s253.806-147.828 253.806-330.758a441.46 441.46 0 0 0-4.05-58.726z m157.954-405.01c-36.451 0-67.502 41.176-67.502 91.127s30.376 91.802 67.502 91.802 67.501-41.176 67.501-91.127-30.376-93.152-67.501-93.152z m11.475 128.253c-13.5 0-24.3-16.876-24.3-37.126s10.8-37.126 24.3-37.126 24.3 16.875 24.3 37.126-10.8 35.776-24.3 35.776z m166.729-128.253c-36.451 0-67.502 41.176-67.502 91.127s29.701 91.802 66.827 91.802 67.502-41.176 67.502-91.127-29.701-93.152-67.502-93.152z m11.475 94.502a24.3 24.3 0 0 0-20.925-18.225 24.3 24.3 0 0 0-20.25 18.225c0-20.925 10.8-37.126 24.3-37.126s24.3 16.876 24.3 37.126z" fill="#FFFFFF" p-id="3198"></path><path d="M248.77 538.663a1087.452 1087.452 0 0 0-13.5 202.505c6.075 30.376 31.726 25.65 67.502 25.65s77.626 10.126 78.301-34.425a887.647 887.647 0 0 1 10.8-166.054c11.476-35.776-143.103-27.676-143.103-27.676z" fill="#FF392E" p-id="3199"></path><path d="M240.67 606.165l143.779 46.576a422.56 422.56 0 0 1 9.45-88.427c10.125-33.076-145.129-25.65-145.129-25.65-2.025 12.15-5.4 37.8-8.1 67.5z" fill="#DD2C00" p-id="3200"></path><path d="M513.377 461.711c112.052 0 202.505-40.5 202.505-67.501s-91.128-39.151-202.505-39.151-202.505 17.55-202.505 39.15 91.127 67.502 202.505 67.502z" fill="#EEB400" p-id="3201"></path><path d="M515.402 486.012a670.966 670.966 0 0 0 231.53-42.526A865.371 865.371 0 0 1 859.66 394.21c11.475 0 24.3 16.2 30.376 45.226s12.15 51.976-12.15 67.501a760.069 760.069 0 0 1-358.434 105.978h-8.775a758.719 758.719 0 0 1-358.434-105.978c-23.626-14.85-17.55-35.775-12.15-66.826s18.9-45.226 30.375-45.226a787.07 787.07 0 0 1 111.378 48.6 658.141 658.141 0 0 0 231.53 42.527z" fill="#FF392E" p-id="3202"></path></svg></li>
                                    <li class="list-inline-item" @click="douyinCode"><svg t="1694758392443" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5464" width="20" height="20"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#350C24" p-id="5465"></path><path d="M846.1312 295.5264a148.6592 148.6592 0 0 1-148.48-148.48h-123.2128V661.0176a112.768 112.768 0 0 1-112.64 112.64 112.768 112.768 0 0 1-112.64-112.64 112.8704 112.8704 0 0 1 112.64-112.64c10.9568 0 10.24-0.2304 23.04 0.4096l-6.6048-123.0592a232.96 232.96 0 0 0-16.384-0.5632 236.1344 236.1344 0 0 0-235.8528 235.8528 236.1344 236.1344 0 0 0 235.8528 235.8528 236.1344 236.1344 0 0 0 235.8528-235.8528v-286.72a270.0544 270.0544 0 0 0 148.48 44.3392z" fill="#FF2A5D" p-id="5466"></path><path d="M817.0752 272.2048a148.6592 148.6592 0 0 1-148.48-148.48H545.28v513.9968a112.768 112.768 0 0 1-112.64 112.64 112.768 112.768 0 0 1-112.64-112.64 112.8448 112.8448 0 0 1 112.64-112.64c10.9568 0 10.24-0.2304 23.04 0.4096l-6.6048-123.0592a249.5488 249.5488 0 0 0-16.384-0.5632 236.1088 236.1088 0 0 0-235.8528 235.8528 236.1344 236.1344 0 0 0 235.8528 235.8528 236.1344 236.1344 0 0 0 235.8528-235.8528v-286.72a270.0288 270.0288 0 0 0 148.48 44.3392z" fill="#50FFFF" p-id="5467"></path><path d="M817.0752 292.736a148.48 148.48 0 0 1-77.44-42.2912 148.8128 148.8128 0 0 1-69.12-103.3472h-96V661.0688a112.768 112.768 0 0 1-112.64 112.64 112.384 112.384 0 0 1-83.968-37.6576 112.64 112.64 0 0 1-57.728-98.304 112.8448 112.8448 0 0 1 112.64-112.64c10.9568 0 10.24-0.2304 23.04 0.4096l-5.376-100.0192a236.1344 236.1344 0 0 0-224.4096 235.52 235.2128 235.2128 0 0 0 74.7008 171.9808 234.5216 234.5216 0 0 0 132.1216 40.576 236.1344 236.1344 0 0 0 235.8528-235.8528v-286.72a270.0288 270.0288 0 0 0 148.48 44.3392z" fill="#FFFFFF" p-id="5468"></path></svg></li>
                                </ul>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6">
                    <div class="sidebar-widget widget_categories wow fadeInUp animated mb-30" data-wow-delay="0.2s">
                        <div class="widget-header-2 position-relative mb-30">
                            <h5 class="mt-5 mb-30">快链</h5>
                        </div>
                        <ul class="font-small">
                            <li class="cat-item cat-item-2" v-for="(item,index) in site.quickLinkList" :key="item.id"><a :href="item.url">{{item.name}}</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="sidebar-widget widget_tagcloud wow fadeInUp animated mb-30" data-wow-delay="0.2s">
                        <div class="widget-header-2 position-relative mb-30">
                            <h5 class="mt-5 mb-30">技术栈</h5>
                        </div>
                        <div class="tagcloud mt-50">
                            <a class="tag-cloud-link" v-for="(item,index) in site.techniqueLinkList" :key="item.id" :href="item.url">{{item.name}}</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="sidebar-widget widget_newsletter wow fadeInUp animated mb-30" data-wow-delay="0.3s">
                        <div class="widget-header-2 position-relative mb-30">
                            <h5 class="mt-5 mb-30">订阅 </h5>
                        </div>
                        <div class="newsletter">
                            <p class="font-medium">订阅我们的服务，在更新时给您发送邮件。</p>
                            <form class="input-group form-subcriber mt-30 d-flex">
                                <input type="email" class="form-control bg-white font-small" placeholder="输入您的邮箱">
                                <el-button class="btn bg-primary text-white" @click="subscribe" >订阅</el-button>
                                <!-- <el-button class="btn bg-primary text-white" type="submit">Subscribe</button> -->
                                <!-- <label class="mt-20"> <input class="mr-5" name="name" type="checkbox" value="1" required=""> I agree to the <a href="#" target="_blank">terms &amp; conditions</a> </label> -->
                            </form>
                        </div>
                    </div>
                </div>
            </div>
         <div class="footer-copy-middle pt-30 mt-20 wow fadeInUp animated" style="text-align: center;">
    <!-- <p class="float-md-left font-small text-muted">© 2020, BLOG </p> -->
    <a class="float-md-none font-small text-muted" href="https://beian.miit.gov.cn/" target="_blank">
       备案号： {{site.recordNumber}}
    </a>
</div>

        </div>
    </footer>
    <!-- End Footer -->
    <el-dialog
    title="扫一扫加我"
    :visible.sync="centerDialogVisible"
    :width="dialogWidth"
    center>
    <div class="d-flex flex-column align-items-center justify-content-center">
        <el-image style="width:200px" :src="codePicture" fit="fit"></el-image>
        <div class="pt-20">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
        </div>
    </div>
    </el-dialog>
  </div>
</template>


<script>
export default {
  components: {  },
  data() {
    return {
        centerDialogVisible:false,
        dialogWidth:'30%',
        codePicture:'',
        // site:{
        //     aboutMe:'',
        //     address:'',
        //     quickLinkList:[],
        //     techniqueLinkList:[],
        // }
    };
  },
  mounted(){
    this.setDialogWidth();
  },
  //计算属性
  computed:{
    site() {
        return this.$store.state.site.site.siteConfig || {};
    }
  },
  methods:{
    weixinCode(){
        this.codePicture = this.site.weiXinCode;
        this.centerDialogVisible = true;
    },
    qqCode(){
       this.codePicture = this.site.qqCode;
       this.centerDialogVisible = true;
    },
    douyinCode(){
       this.codePicture = this.site.douYinCode;
       this.centerDialogVisible = true;
    },
    //对话框大小
    setDialogWidth() {
      var val = document.body.clientWidth;
      const def = 800; // 默认宽度
      if (val < def) {
        this.dialogWidth = "90%";
        console.log('100%')
      } else {
        this.dialogWidth = "30%";
      }
    },
    subscribe(){
        this.$message({
            'type':'warning',
            'message':'开发中！'
        })
    }
  }
};
</script>

<style>
</style>